<template>
  <view style="width: 100%; min-height: 100vh; background-color: #F8F8F8;">
    <view id="tabNav" style="width: 100%; position: fixed; top: 0; z-index: 99;">
      <scroll-view scroll-x class="bg-white nav text-center">
        <view class="flex text-center">
          <view class="cu-item flex-sub" :class="index==tab_cur?'text-red cur':''" v-for="(item,index) in tab_list"
                :key="index" @click="handleChangeTab(index)" :data-id="index">
            {{ item.name }}{{ item.num }}
          </view>
        </view>
      </scroll-view>
    </view>
    <view>
      <view style="width: 100%; background-color: #F8F8F8;" :style="'height:'+tab_nav_height+'px'"></view>
      <view class="flex justify-between" style="width: 100%; padding: 0 20upx; flex-wrap: wrap;">
        <view class="flex flex-direction bg-white list" v-for="(item,index) in page_main_data" :key="index"
              @click="handleToArticle(item.type, item.id)">
          <image :src="item.img_arr[0]" mode="aspectFill" style="width: 346upx; height: 384upx; border-radius: 20upx 20upx 0 0;"></image>
          <view class="flex flex-direction" style="padding: 20upx;">
            <view class="text-hidden" style="width: 100%; font-size: 28upx; font-weight: bold; color: black;">
              {{ item.title }}
            </view>
            <view class="flex align-center" style="width: 100%; height: 40upx; margin: 7% 0;">
              <view class="flex justify-center align-center tag">{{ item.category }}</view>
              <view>
                <image src="/static/icon/index/dianzan@2x.png"
                       style="width: 26upx; height: 26upx;margin: 0 8upx;"></image>
              </view>
              <view style="color: #999999; font-size: 24upx;">{{ item.zan_num }}</view>
            </view>
            <view v-if="item.product" style="margin-bottom: 7%;">
              <view style="font-size: 28upx; color: #E52718; font-weight: bold;">
                ¥{{ item.product && item.product.sale_price }}
              </view>
            </view>
            <view class="flex align-center">
              <image :src="item.user && item.user.avatar" mode="aspectFill"
                     style="width: 44upx; height: 44upx; border-radius: 50%;"></image>
              <view class="text-hidden" style="width: 140upx; font-size: 24upx; color: #999999; margin-left: 10upx;">
                {{ item.user && item.user.nick_name }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="!page_main_data.length && show_flag" class="justify-center align-center"
            style="width: 100%; padding: 50% 0; flex-direction: column; text-align: center;">
        <image src="/static/image/no_content@2x.png" style="width: 264upx; height: 264upx;"></image>
        <view class="flex justify-center" style="font-size: 24upx; color: #999999;">暂无内容</view>
      </view>
      <view>
        <view class="flex align-center justify-center"
              v-if="page_main_data.length >= 15"
              style="width: 100%; height: 102upx; padding: 0 50upx;">
          <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
          <view style="width: 40%; text-align: center;">
            <view v-if="!bottom_flag" style="color: #CACACA; font-size: 24upx; margin: 0 40upx;">到底了</view>
            <view v-else class="action">
              <view class="cu-load" :class="!is_load?'loading':'over'" style="font-size: 28upx; color: #CACACA;"></view>
            </view>
          </view>
          <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {numSwitch} from "utils/wxUtil";
import {article_getMyArticleByCon} from "api/my/my"

export default {
  data() {
    return {
      scroll_left: 0, //tab栏横向移动距离
      tab_list: [
        {
          name: '文章',
          num: 0,
        },
        {
          name: '传帮带',
          num: 0,
        }
      ], //tab数据
      tab_cur: 0, //tab索引
      bottom_flag: true, //触底标识
      page: 1, //分页
      page_main_data: [], //页面数据
      is_load: false, //加载
      tab_nav_height: 0, //tab菜单高度
      show_flag: false,
      type_arr: '', //标识
    }
  },
  methods: {
    pageInit(type_arr, page = 1, type) {
      this.type_arr = type_arr;
      article_getMyArticleByCon({type_arr, page}).then(res => {
        if(type){
          this.page_main_data = [];
        }
        this.tab_list[0].num = res.data.article_num;
        this.tab_list[1].num = res.data.not_article_num;
        if (res.data.articles) {
          let temp_data = res.data.articles.data;
          if (temp_data.length == 0) {
            this.bottom_flag = false;
          } else {
            temp_data.forEach(item => {
              item.zan_num = this.computeNum(item.zan_num);
              this.page_main_data.push(item)
            })
          }
        }
      }).finally(()=>{
        this.show_flag = true;
      })
    },
    computeNum: numSwitch,
    //去文章页
    handleToArticle(type, article_id) {
      const jump_url_obj = {
        article: '/pages/article/article',
        article_product: '/pages/passBand/projectDetail/projectDetail',
        product: '/pages/passBand/otherDetail/otherDetail'
      }
      this.$uniNavigateTo({
        url: jump_url_obj[type],
        query: {
          article_id
        }
      })
    },
    handleToCommodityDetail() {
      this.$uniNavigateTo({
        url: '/pages/passBand/commodityDetail/commodityDetail'
      })
    },
    //切换tab栏
    handleChangeTab(index) {
      uni.pageScrollTo({scrollTop: 0, duration: 0});
      this.tab_cur = index;
      this.bottom_flag = true;
      this.page = 1;
      this.scroll_left = (index - 1) * 60
      switch (index) {
        case 0:
          this.pageInit('article',1,1)
          break;
        case 1:
          this.pageInit('article_product,product',1,1)
          break;
      }
    }
  },
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query.select('#tabNav').boundingClientRect(data => {
      this.tab_nav_height = data.height + 15;
    }).exec();
  },
  onShow() {
    uni.pageScrollTo({scrollTop: 0, duration: 0});
    this.pageInit(this.type_arr ? this.type_arr : 'article',1, 1);
  },
  //上拉加载
  onReachBottom() {
    if (this.bottom_flag) {
      this.is_load = false;
      this.page += 1;
      this.pageInit(this.type_arr, this.page);
    }
    console.log('上拉加载')
  },
  //下拉刷新
  onPullDownRefresh() {
    this.page = 1;
    this.bottom_flag = true;
    this.pageInit(this.type_arr,1,1);
    uni.stopPullDownRefresh();
  }
}
</script>

<style lang="less" scoped>
/deep/ .nav .cu-item {
  margin: 0 100upx;
  padding: 0;
}

.list {
  width: 346upx;
  height: 618upx;
  border-radius: 20upx;
  margin-bottom: 30upx;
}

.tag {
  font-size: 22upx;
  padding: 0 12upx;
  color: #E52718;
  height: 40upx;
  background-color: #FFE9E7;
  border-radius: 4upx;
}

.tutorials-box {
  height: 238upx;
  background-color: white;
  border-radius: 10upx;
  padding: 20upx;
  margin-bottom: 20upx;
}
</style>
